<div th:replace="~{ app :: layout ('用户登录', _, ~{::#main}, _) }" xmlns:th="http://www.thymeleaf.org">
    <main id="main" class="my-2rem container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">登录</div>

                    <div class="card-body">
                        <p class="text-center text-muted font-size-12">（方案一）第三方账号登录 (待实现)</p>
                        <p class="text-center">
                            <a class="btn btn-outline-primary disabled" href="#" role="button">
                                <i class="bi bi-github me-1"></i>
                                GitHub
                            </a>
                        </p>
                        <p class="mt-3 text-center text-muted font-size-12"><span class="text-primary">✔（方案二）</span>邮箱、密码登录</p>
                        <p class="text-center text-primary" th:if="${param.error}">Invalid email and password.</p>
                        <p class="text-center text-success" th:if="${msg}" th:text="${msg}"></p>

                        <form method="POST" action="#" th:action="@{/login}">
                            <div class="row mb-3 justify-content-center">
                                <div class="col-lg-6">
                                    <input id="email" placeholder="邮箱" type="text" class="form-control" name="email" value="" required autofocus>
                                </div>
                            </div>

                            <div class="row mb-3 justify-content-center">
                                <div class="col-lg-6">
                                    <input id="password" placeholder="密码" type="password" class="form-control" name="password" required>
                                </div>
                            </div>


                            <div class="row mb-3">
                                <div class="col-lg-6 offset-lg-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="remember-me" id="remember-me" >
                                        <label class="form-check-label" for="remember-me">
                                            记住我
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-0">
                                <div class="col-lg-6 offset-lg-3">
                                    <button type="submit" class="btn btn-primary">
                                        登录
                                    </button>

                                    <a class="btn btn-link font-size-12 text-muted" href="/user/password-reset">
                                        忘记密码
                                    </a>
                                    <a class="btn btn-link font-size-12 text-muted" href="/user/register">
                                        注册新账号
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
